<template>
	<div class="index">
		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
		  		<div class="t_nav_tab_box">
					<div class="t_tab_nav" :class="{acts:nowtab==1,bgw:nowtab==1}" @click="choosetab(1)">分销商管理</div>
					<!-- <div class="t_tab_nav" :class="{acts:nowtab==2,bgw:nowtab==2}" @click="choosetab(2)">发展分销商</div> -->
				</div>
				<div>
					<!-- 分销商管理 -->
					<distributorlist v-if="nowtab==1" />
					<!-- 发展分销商 -->
					<moredistributor v-if="nowtab==2" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	import distributorlist from '@/components/myDistributor/distributorlist'
	import moredistributor from '@/components/myDistributor/moredistributor'
	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot,
			'distributorlist':distributorlist,
			'moredistributor':moredistributor
		},
		name: 'myDistributor',
		data() {
			return {
				nowtab:1
			}
		},
		beforeDestroy() {

		},
		created() {

		},
		methods: {
			choosetab(i){
				this.nowtab = i
			}
		}

	}
</script>
<style scoped>
	.t_nav_tab_box{
		display: flex;
		background-color: #F9F9F9;

	}
	.t_tab_nav{
		width: 176px;
		line-height: 50px;
		text-align: center;
		color: #333333;
		cursor: pointer;
	}
	.t_tab_nav_lei{
		background-color: white;
		border-bottom: 3px solid #F1F8FF;
		color: #F1F8FF;
	}
</style>
<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";
	.index {

    /deep/ .el-select{width: 250px; margin-right: 20px;}
    /deep/ .el-input{width: 250px; margin-right: 20px;}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250); border: 0;}
    /deep/ .el-range-editor .el-range-input { background: #f7f8fa;}
    // /deep/ .el-button{ padding: 11px 23px !important;}

    /deep/ .el-input__inner:-moz-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner:-ms-input-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner::-webkit-input-placeholder {
        color: rgb(140, 140, 140);
    }
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    /deep/ .el-button--danger.is-plain {
        color: #18A0FB !important;
        background: #EEF7FF !important;
        border-color: #18A0FB !important;
    }

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272;
				}

				.add {
					display: flex;
					justify-content: space-between;
					padding: 20px 30px;
					text-align: right;
					position: relative;

					.input-with-select {
						width: 280px;
					}

					.el-button {
						padding: 10px 20px;
					}
				}

				.list {
					display: flex;
					text-align: center;
					color: #727272;
					line-height: 45px;
					margin: 0 20px;
					border: 1px #EAEAEA solid;
					margin-top: -1px;

					.th {
						flex: 1;
						background: #F9F9F9;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}

					.td {
						flex: 1;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;

						.el-button {
							a {
								color: #409EFF;
							}

							&:hover {
								a {
									color: #FFF;
								}
							}
						}

					}

					.th1 {
						flex-basis: 50px;
						background: #F9F9F9;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}

					.td1 {
						flex-basis: 50px;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}

				}

				.el-pagination {
					text-align: right;
					margin: 20px 0
				}

				.my {
					display: flex;
					justify-content: space-between;
					padding: 20px;
					line-height: 20px;
					align-items: center;

					.myid {
						font-size: 17px;
						color: #DD2727;
						padding-left: 10px;
						display: flex;
						align-items: center;

						.tip {
							display: inline-flex;
							flex-direction: column;

							span {
								color: #B1B1B1;
								font-size: 14px;
								margin: 0 20px
							}
						}
					}

					.invitation {
						font-size: 14px;
						color: #B1B1B1;

						span {
							color: #197CFF;
							cursor: pointer;
						}
					}
				}


	}
</style>
